<template>
  <div class="article-item-wrapper">
    <div class="article-item-content">
      <!-- 顶栏 -->
      <div class="article-top-wrapper">
        <!-- 用户头像 -->
        <el-avatar :size="36" :src="avatar" />
        <!-- 文章标题 -->
        <div class="article-title">{{ title }}</div>
      </div>
      <!-- 文章描述 -->
      <p class="article-desc">
        {{ desc }}
      </p>
      <div class="article-bottom">
        <!-- 文章标签 -->
        <div class="article-tags">
          <el-tag v-for="tag in tags" :key="tag._id" class="tag">{{ tag.name }}</el-tag>
        </div>
        <!-- 发布日期 -->
        <div class="article-date">{{ date }}</div>
      </div>
    </div>
    <!-- slot -->
    <slot name="after"></slot>
  </div>
</template>

<script>
export default {
  name: 'ArticleItem',
  props: {
    avatar: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: 'Default Title'
    },
    desc: {
      type: String,
      default: "This is a default description"
    },
    tags: {
      type: Array,
      default: () => [{ _id: 1, name: 'tag1' }, { _id: 2, name: 'tag2' }]
    },
    date: {
      type: [Date, String],
      default: () => new Date().toLocaleDateString()
    }
  },
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.article-item-wrapper {
  display: flex;
  flex-direction: row;
  border-top: 1px solid var(--el-border-color-light);
  padding-top: 14px;
  margin: 14px 0;

  .article-item-content {
    flex: 1;
    overflow: hidden;

    .article-top-wrapper {
      display: flex;
      flex-direction: row;

      .el-avatar {
        cursor: pointer;
      }

      .article-title {
        padding-left: 8px;
        line-height: 40px;
        font-size: 14pt;
        cursor: pointer;
        color: black;
      }
    }

    .article-desc {
      font-size: 12pt;
      color: var(--el-text-color-regular);
      width: 100%;
      margin-top: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      cursor: pointer;
    }

    .article-bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .tag:not(:last-child) {
        margin-right: 6px;
      }

      .article-date {
        height: 24px;
        color: var(--el-text-color-secondary);
        font-size: 10pt;
        line-height: 24px;
      }
    }
  }
}
</style>
